<template>
    <div class="gongyi">
<!--        新增-->
        <div>
            <el-button type="text" @click="form1.dialogFormVisible1 = true" style="color: black; margin-left: 5% ;font-size: 1em;">新增文章</el-button>
            <br>
            <div style="border: 2px"></div>
            <el-dialog title="新增文章" :visible.sync="form1.dialogFormVisible1">
                <el-form :model="form1">
                    <el-form-item label="头像" :label-width="form1.formLabelWidth1">
                        <el-input v-model="form1.imgPath1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="标题" :label-width="form1.formLabelWidth1">
                        <el-input v-model="form1.welfareTitle1" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="form1.formLabelWidth1">
                        <el-input v-model="form1.welfareContent1" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="form1.dialogFormVisible1 = false" style="height: 40px;">取消</el-button>
                    <el-button style="height: 40px;" @click="queDingXinZeng">确定新增</el-button>
                </div>
            </el-dialog>
        </div>
<!--        搜索-->
        <div>
            <el-button type="text" @click="sousuo" style="color: black; margin-left: 5% ;font-size: 1em">搜索文章</el-button>
            <span style="margin-left: 5%">id：</span>
            <input type="text" v-model="ss.id" placeholder="请输入id">
            <span style="margin-left: 5%">标题：</span>
            <input type="text" v-model="ss.welfareTitle" placeholder="请输入标题">
            <span style="margin-left: 5%">内容：</span>
            <input type="text" v-model="ss.welfareContent" placeholder="请输入内容">
        </div>
<!--        主体、删除、修改-->
        <div>
            <el-table
                    :data="list"
                    border
                    style="width: 90%;margin-left: 5%"
                    :header-cell-style="{'background-color': '#409EFF', color:'#fff'}">
                <el-table-column
                        fixed
                        prop="id"
                        label="id"
                        width="40%">
                </el-table-column>
                <el-table-column
                        prop="imgPath"
                        label="头像"
                        width="160%">
                    <template slot-scope="scope">
                        <span v-html="showImage(scope.row)"></span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="welfareTitle"
                        label="标题"
                        width="240%">
                </el-table-column>
                <el-table-column
                        prop="welfareContent"
                        label="内容"
                        width="520%">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="120%">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="shanChu(scope.row)">删除</el-button>
                        <el-button type="text" size="small" @click="xiuGai(scope.row)">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog title="修改" :visible.sync="form.dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="图片路径" :label-width="form.formLabelWidth">
                        <el-input v-model="form.imgPath"></el-input>
                    </el-form-item>
                    <el-form-item label="标题" :label-width="form.formLabelWidth">
                        <el-input v-model="form.welfareTitle" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="内容" :label-width="form.formLabelWidth">
                        <el-input v-model="form.welfareContent" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button style="height: 40px;" @click="form.dialogFormVisible = false">取消</el-button>
                    <el-button style="height: 40px;" @click="queDingXiuGai">确定修改</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "gongyi",
        data:function () {
            return{
                list:[],

                //表单-修改
                form: {
                    id:'',
                    imgPath:'',
                    welfareTitle:'',
                    welfareContent:'',
                    formLabelWidth: '120px',
                    dialogFormVisible: false,//是否显示
                },

                //表单-新增
                form1:{
                    imgPath1:'',
                    welfareTitle1:'',
                    welfareContent1:'',
                    formLabelWidth1: '120px',
                    dialogFormVisible1:false
                },

                //数组-搜索
                ss:{
                    id:'',
                    welfareTitle:'',
                    welfareContent:''
                }
            }
        },
        created() {
            this.sousuo();
        },
        methods:{
            showImage(row){
                return `<img src="${row.imgPath}" style="width: 100%;">`;
            },

            shanChu(row){
                this.axios.request("/public/shanChuPublicCenterMessage", {
                    params: {
                        id:row.id
                    }
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                })
            },

            xiuGai(row){
                this.form.dialogFormVisible = true;
                this.form.id = row.id;
                this.form.imgPath = row.imgPath;
                this.form.welfareTitle = row.welfareTitle;
                this.form.welfareContent = row.welfareContent;
            },

            queDingXiuGai(){
                this.axios.post("/public/xiuGaiPublicCenterMessage", {
                    id:this.form.id,
                    imgPath:this.form.imgPath,
                    welfareTitle:this.form.welfareTitle,
                    welfareContent:this.form.welfareContent,
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                });
            },

            queDingXinZeng(){
                this.axios.post("/public/xinZengPublicCenterMessage", {
                    imgPath:this.form1.imgPath1,
                    welfareTitle:this.form1.welfareTitle1,
                    welfareContent:this.form1.welfareContent1,
                }).then((res) => {
                    console.log(res)
                    location.reload()
                }).catch((err) => {

                });
            },

            sousuo(){
                this.axios.post("/public/souSuoPublicCenterMessage", {
                    id:this.ss.id,
                    welfareTitle:this.ss.welfareTitle,
                    welfareContent:this.ss.welfareContent
                }).then((res) => {
                    console.log(res)
                    this.list = res.data.data
                }).catch((err) => {

                });
            }
        }
    }
</script>

<style scoped>

</style>